<template>
  <vue-form :state="formstate" ref="form" class="form">
    <div class="pt20">通道状态：<span class="tip">{{ enter_status === -200 ? '审核未通过' : enter_status === -100 ? '入驻失败' : enter_status ===  0 ? '资料提审' : enter_status === 101 ? '已初审，待入驻' : enter_status === 100 ? '入驻中' : enter_status === 200 ? '已入驻' : enter_status === 311 ? '等待配置支付通道' : enter_status === 312 ? '部分支付通道配置成功' : enter_status === 313 ? '支付通道配置失败' : enter_status === 310 ? '支付通道配置成功' : enter_status === 500 ? '完成' : enter_status === 900 ? '申请修改信息' : enter_status === 901 ? '信息修改中' : enter_status === 910 ? '申请修改费率' : enter_status === 911 ? '费率修改中' : enter_status === 912 ? '费率修改完成' : enter_status === 913 ? '费率修改失败' : '无' }}</span></div>
    <div>状态信息：<span :class="error_info ? 'err' : ''">{{ error_info ? error_info : '无' }}</span></div>
    <validate tag="div" class="weui-cell_item">
      <div class="weui-cells__title"><span class="err">*</span>门店名称</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="model.store_name" type="text" required name="store_name" placeholder="请参考格式：深圳市贵人鸟鞋服店"/>
        </div>
      </div>
      <field-messages name="store_name" show="$touched">
        <div slot="required" class="err">门店名称必须填写~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item">
      <div class="weui-cells__title"><span class="err">*</span>经营地址</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" @focus="handleSelectAddress" v-model="address_name" readonly type="text" required name="address_name" placeholder="请选择省市区"/>
        </div>
      </div>
      <field-messages name="address_name" show="$touched">
        <div slot="required" class="err">经营地址必须选择~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item">
      <div class="weui-cells__title"><span class="err">*</span>详细地址</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="model.address" type="text" required name="address" placeholder="具体精确到门牌号"/>
        </div>
      </div>
      <field-messages name="address" show="$touched">
        <div slot="required" class="err">详细地址必须填写~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item">
      <div class="weui-cells__title"><span class="err">*</span>行业类型</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" @focus="handleSelectMcc" v-model="mcc_name" readonly type="text" required name="mcc_name" placeholder="请选择行业类型"/>
        </div>
      </div>
      <field-messages name="mcc_name" show="$touched">
        <div slot="required" class="err">行业类型必须选择~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item">
      <div class="weui-cells__title"><span class="err">*</span>渠道选择</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" @focus="handleSelectBalanceType" v-model="balance_type_name" readonly type="text" required name="balance_type_name" placeholder="请选择渠道"/>
        </div>
      </div>
      <field-messages name="balance_type_name" show="$touched">
        <div slot="required" class="err">渠道选择必须选择~</div>
      </field-messages>
    </validate>
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell weui-cell_switch">
        <div class="weui-cell__bd">配置POS机支付</div>
        <div class="weui-cell__ft" @change="handlePosPay">
            <input class="weui-switch" v-model="model.card" type="checkbox"/>
        </div>
      </div>
    </div>
    <p class="title"  v-if="model.card">POS机支付</p>
    <validate tag="div" class="weui-cell_item" :custom="{ 'validRata': validRata }" v-if="model.card">
      <div class="weui-cells__title"><span class="err">*</span>借记卡D+0费率（%）</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="model.debit_d0" type="number" required name="debit_d0" placeholder="请输入百分比，保留2位小数"/>
        </div>
      </div>
      <field-messages name="debit_d0" show="$touched">
        <div slot="required" class="err">费率必须填写~</div>
        <div slot="number" class="err">费率格式错误~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item" :custom="{ 'validRata': validRata }" v-if="model.card">
      <div class="weui-cells__title"><span class="err">*</span>借记卡D+1费率（%）</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="model.debit_d1" type="number" required name="debit_d1" placeholder="请输入百分比，保留2位小数"/>
        </div>
      </div>
      <field-messages name="debit_d1" show="$touched">
        <div slot="required" class="err">费率必须填写~</div>
        <div slot="number" class="err">费率格式错误~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item" v-if="model.card">
      <div class="weui-cells__title"><span class="err">*</span>借记卡D+1封顶金额（元）</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="model.debit_money" type="number" required name="debit_money" placeholder="请输入金额"/>
        </div>
      </div>
      <field-messages name="debit_money" show="$touched">
        <div slot="required" class="err">封顶金额必须填写~</div>
        <div slot="number" class="err">封顶金额格式错误~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item" :custom="{ 'validRata': validRata }" v-if="model.card">
      <div class="weui-cells__title"><span class="err">*</span>贷记卡D+0费率（%）</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="model.credit_d0" type="number" required name="credit_d0" placeholder="请输入百分比，保留2位小数"/>
        </div>
      </div>
      <field-messages name="credit_d0" show="$touched">
        <div slot="required" class="err">费率必须填写~</div>
        <div slot="number" class="err">费率格式错误~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item" :custom="{ 'validRata': validRata }" v-if="model.card">
      <div class="weui-cells__title"><span class="err">*</span>贷记卡D+1费率（%）</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="model.credit_d1" type="number" required name="credit_d1" placeholder="请输入百分比，保留2位小数"/>
        </div>
      </div>
      <field-messages name="credit_d1" show="$touched">
        <div slot="required" class="err">费率必须填写~</div>
        <div slot="number" class="err">费率格式错误~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item" :custom="{ 'validRata': validRata }" v-if="model.card">
      <div class="weui-cells__title"><span class="err">*</span>境外卡D+0费率（%）</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="model.ovsea_d0" type="number" required name="ovsea_d0" placeholder="请输入百分比，保留2位小数"/>
        </div>
      </div>
      <field-messages name="ovsea_d0" show="$touched">
        <div slot="required" class="err">费率必须填写~</div>
        <div slot="number" class="err">费率格式错误~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item" :custom="{ 'validRata': validRata }" v-if="model.card">
      <div class="weui-cells__title"><span class="err">*</span>境外卡D+1费率（%）</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="model.ovsea_d1" type="number" required name="ovsea_d1" placeholder="请输入百分比，保留2位小数"/>
        </div>
      </div>
      <field-messages name="ovsea_d1" show="$touched">
        <div slot="required" class="err">费率必须填写~</div>
        <div slot="number" class="err">费率格式错误~</div>
      </field-messages>
    </validate>
    <div class="weui-cells weui-cells_form" id="uploader" v-if="model.card">
      <div class="weui-cell">
          <div class="weui-cell__bd">
            <div class="weui-uploader">
              <div class="weui-uploader__hd">
                <div class="weui-uploader__title">证件照片</div>
              </div>
              <div class="weui-uploader__bd">
                <div class="weui-uploader_box">
                  <div class="weui-uploader__input-box">
                    <img v-if="model.channel_lepos_netprot" :src="model.channel_lepos_netprot" alt="">
                    <input id="uploaderInput" ref="channel_lepos_netprot" @change="handleUploadchannelLeposNetprot" readonly class="weui-uploader__input" type="file" accept="image/*" multiple="" />
                  </div>
                  <p><span class="err">*</span>入网协议</p>
                </div>
                <div class="weui-uploader_box">
                  <div class="weui-uploader__input-box">
                    <img v-if="model.store_licence_hyg" :src="model.store_licence_hyg" alt="">
                    <input id="uploaderInput" ref="store_licence_hyg" @change="handleUploadstoreLicenceHyg" readonly class="weui-uploader__input" type="file" accept="image/*" multiple="" />
                  </div>
                  <p>食品卫生许可证（餐饮必传）</p>
                </div>
                <div class="weui-uploader_box">
                  <div class="weui-uploader__input-box">
                    <img v-if="model.ch_lpos_certi" :src="model.ch_lpos_certi" alt="">
                    <input id="uploaderInput" ref="ch_lpos_certi" @change="handleUploadchLposCerti" readonly class="weui-uploader__input" type="file" accept="image/*" multiple="" />
                  </div>
                  <p>授权书</p>
                </div>
                <div class="weui-uploader_box">
                  <div class="weui-uploader__input-box">
                    <img v-if="model.channel_lepos_agreement" :src="model.channel_lepos_agreement" alt="">
                    <input id="uploaderInput" ref="channel_lepos_agreement" @change="handleUploadchannelLeposAgreement" readonly class="weui-uploader__input" type="file" accept="image/*" multiple="" />
                  </div>
                  <p>租凭协议或房产证明</p>
                </div>
              </div>
            </div>
          </div>
      </div>
    </div>
    <p class="title">移动支付</p>
    <validate tag="div" class="weui-cell_item" :custom="{ 'validRata': validRata }">
      <div class="weui-cells__title"><span class="err">*</span>微信通道签约费率D+0（%）</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" type="number" v-model="model.wx_t0" required name="wx_t0" placeholder="请输入百分比 如：0.38"/>
        </div>
      </div>
      <field-messages name="wx_t0" show="$touched" :custom="{ 'validRata': validRata }">
        <div slot="required" class="err">微信通道签约费率D+0必须填写~</div>
        <div slot="number" class="err">微信通道签约费率D+0格式错误~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item" :custom="{ 'validRata': validRata }">
      <div class="weui-cells__title"><span class="err">*</span>微信通道签约费率D+1（%）</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" type="number" v-model="model.wx_t1" required name="wx_t1" placeholder="请输入百分比 如：0.38"/>
        </div>
      </div>
      <field-messages name="wx_t1" show="$touched">
        <div slot="required" class="err">微信通道签约费率D+1必须填写~</div>
        <div slot="number" class="err">微信通道签约费率D+1格式错误~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item" :custom="{ 'validRata': validRata }">
      <div class="weui-cells__title"><span class="err">*</span>支付宝通道签约费率D+0（%）</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" type="number" v-model="model.ali_t0" required name="ali_t0" placeholder="请输入百分比 如：0.38"/>
        </div>
      </div>
      <field-messages name="ali_t0" show="$touched">
        <div slot="required" class="err">支付宝通道签约费率D+0必须填写~</div>
        <div slot="number" class="err">支付宝D+0费率格式错误~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item" :custom="{ 'validRata': validRata }">
      <div class="weui-cells__title"><span class="err">*</span>支付宝通道签约费率D+1（%）</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" type="number" v-model="model.ali_t1" required name="ali_t1" placeholder="请输入百分比 如：0.38"/>
        </div>
      </div>
      <field-messages name="ali_t1" show="$touched">
        <div slot="required" class="err">支付宝通道签约费率D+1必须填写~</div>
        <div slot="number" class="err">支付宝D+1费率格式错误~</div>
      </field-messages>
    </validate>
    <div class="pb20 pt40">
      <button class="weui-btn weui-btn_primary" @touchstart.stop.prevent="handleClickSubmit">提交审核</button>
    </div>
  </vue-form>

</template>

<script>
import { address } from '@/utils/address'
import { uploader } from '@/utils/uploader'
import { areaAddress } from '@/api/index'
import { selaemanChannelLeInit, salemanChannelLeCategory, merchantChannelLeUpdate } from '@/api/salesman'

export default {
  data() {
    return {
      show: false,
      edit: false,
      formstate: {},
      model: {
        card: false,
        mcc: '',
        area: '',
        credit_d0: '',
        credit_d1: '',
        debit_d0: '',
        debit_d1: '',
        ovsea_d1: '',
        ovsea_d0: '',
        address: '',
        wx_t0: '',
        wx_t1: '',
        ali_t0: '',
        ali_t1: '',
        store_name: '',
        debit_money: '',
        balance_type: '',
        ch_lpos_certi: '',
        store_licence_hyg: '',
        channel_lepos_netprot: '',
        channel_lepos_agreement: ''
      },
      address: [],
      category: [],
      balanceType: [
        {
          value: 'd1', label: 'D+1'
        },
        {
          value: 'd0', label: 'D+0'
        }
      ],
      enter_status: '',
      error_info: '',
      mcc_name: '',
      address_name: '',
      balance_type_name: ''
    }
  },
  methods: {
    handleDocumentInit() {
      areaAddress().then(res => {
        if (res.data.errorCode === 0) {
          this.address = res.data.result
        } else {
          this.$weui.alert('地区数据加载失败，请刷新重试！')
        }
      })
      salemanChannelLeCategory().then(res => {
        if (res.data.errorCode === 0) {
          this.category = res.data.result
        }
      })
      selaemanChannelLeInit(this.$route.query.merchant_num).then(res => {
        if (res.data.errorCode === 0) {
          this.edit = true
            res.data.result.card === 1 ? this.model.card = false : res.data.result.card === 3 ? this.model.card = true : this.model.card = false
            this.model.area = res.data.result.area.code
            this.address_name = res.data.result.area.name.toString().replace(/\,/g ,'/')
            this.model.store_name = res.data.result.mch_short_name
            this.model.address = res.data.result.address
            this.model.mcc = res.data.result.mcc.code
            this.mcc_name = res.data.result.mcc.name
            this.model.balance_type = res.data.result.balance_type
            res.data.result.balance_type.toLowerCase() === 'd0' ? this.balance_type_name = 'D+0' : this.balance_type_name = 'D+1'
            this.model.credit_d1 = Number(res.data.result.pos_rates.credit.d1.rate)
            this.model.credit_d0 = Number(res.data.result.pos_rates.credit.d0.rate)
            this.model.debit_d1 = Number(res.data.result.pos_rates.debit.d1.rate)
            this.model.debit_d0 = Number(res.data.result.pos_rates.debit.d0.rate)
            this.model.ovsea_d0 = Number(res.data.result.pos_rates.ovsea.d0.rate)
            this.model.ovsea_d1 = Number(res.data.result.pos_rates.ovsea.d1.rate)
            this.model.debit_money = Number(res.data.result.pos_rates.debit.d1.ceiling)
            this.model.wx_t0 = Number(res.data.result.rates_t0.wx)
            this.model.wx_t1 = Number(res.data.result.rates_t1.wx)
            this.model.ali_t0 = Number(res.data.result.rates_t0.ali)
            this.model.ali_t1 = Number(res.data.result.rates_t1.ali)
            this.model.wx_t0 = res.data.result.rates_t0.wx
            this.model.wx_t1 = res.data.result.rates_t1.wx
            this.model.ali_t0 = res.data.result.rates_t0.ali
            this.model.ali_t1 = res.data.result.rates_t1.ali
            this.model.channel_lepos_agreement = res.data.result.photo.channel_lepos_place_evid
            this.model.channel_lepos_netprot = res.data.result.photo.channel_lepos_netprot
            this.model.store_licence_hyg = res.data.result.photo.store_licence_hyg
            this.model.ch_lpos_certi = res.data.result.photo.ch_lpos_certi
            this.enter_status = res.data.result.enter_status.code
            this.error_info = res.data.result.enter_status.error_info
        }
      })
    },
    handleSelectAddress() {
      if (this.address.length === 0) {
        this.$weui.alert('请刷新获取地区数据')
        return false
      }
      address(this.address).then(res => {
        this.model.area = res.value
        this.address_name = res.label
      }).catch(err => {
        this.$weui.alert(err)
      })
    },
    handleSelectMcc() {
      const arr = [], _this = this
      this.category.map((item) => {
        arr.push({ value: item.F_mcc_code, label: item.F_grandpa_txt + '/' + item.F_father_txt + '/' + item.F_mcc_txt })
      })
      this.$weui.picker(arr, {
        onConfirm(res) {
          _this.mcc_name = res[0].label
          _this.model.mcc = res[0].value
        }
      })
    },
    handleSelectBalanceType() {
      const _this = this
      _this.$weui.picker(this.balanceType, {
        onConfirm(res) {
          _this.model.balance_type = res[0].value
          _this.balance_type_name = res[0].label
        }
      })
    },
    handleUploadchannelLeposNetprot() {
      uploader(this, this.$refs.channel_lepos_netprot.files).then(res => {
        this.model.channel_lepos_netprot = res
        this.show = false
      }).catch(err => {
        this.show = false
        this.$weui.alert(err)
      })
    },
    handleUploadstoreLicenceHyg() {
      uploader(this, this.$refs.store_licence_hyg.files).then(res => {
        this.model.store_licence_hyg = res
        this.show = false
      }).catch(err => {
        this.show = false
        this.$weui.alert(err)
      })
    },
    handleUploadchLposCerti() {
      uploader(this, this.$refs.ch_lpos_certi.files).then(res => {
        this.model.ch_lpos_certi = res
        this.show = false
      }).catch(err => {
        this.show = false
        this.$weui.alert(err)
      })
    },
    handleUploadchannelLeposAgreement() {
      uploader(this, this.$refs.channel_lepos_agreement.files).then(res => {
        this.model.channel_lepos_agreement = res
        this.show = false
      }).catch(err => {
        this.show = false
        this.$weui.alert(err)
      })
    },
    handleClickSubmit() {
      if (this.formstate.$invalid) {
        this.$weui.alert('请补全资料')
        return false
      } else {
        this.$loading(true, '正在提交')
        merchantChannelLeUpdate(this.$route.query.merchant_num, this.model).then(res => {
          if (res.data.errorCode === 0) {
            this.$loading(false)
            this.$weui.alert('提交成功')
            this.$router.go(-1)
          } else {
            this.$loading(false)
            this.$weui.alert(res.data.errorMsg)
            return false
          }
        })
      }
    },
    validRata(v) {
      if (v.length > 4) {
        return false
      } else {
        return true
      }
    },
    handlePosPay() {
      this.model.credit_d1 = null
      this.model.credit_d0 = null
      this.model.debit_money = null
      this.model.debit_d1 = null
      this.model.debit_d0 = null
      this.model.ovsea_d0 = null
      this.model.ovsea_d1 = null
      this.model.channel_lepos_agreement = null
      this.model.channel_lepos_netprot = null
      this.model.store_licence_hyg = null
      this.model.ch_lpos_certi = null
    }
  },
  mounted() {
    this.handleDocumentInit()
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/index.scss';
  .form {
    padding: 0 px2rem(30px);
    .title {
      font-size: 14px;
      padding: px2rem(10px) 0 px2rem(10px) 0;
      background-color: #F5F5F4;
      color: #44AF39;
    }
  }
</style>